<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>设备效率分析</title>
	<link rel="stylesheet" href="scripts/bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" href="scripts/bootstrap/css/bootstrap-datetimepicker.min.css" />
	<script src="scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
	<script src="scripts/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="scripts/bootstrap/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
	<script src="scripts/bootstrap/js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script> 
	
	<script src="scripts/highcharts/highcharts.js"></script>
    <style type="text/css">
    	table th,td { text-align: center; }
    	
    </style>
    
    <script type="text/javascript">
    
	    $(function() {
	        		
	    	var begindate = new Date();
	    	$("#begintime").val(begindate.getFullYear()+"-"+(begindate.getMonth()+1)+"-"+"01");
	    	$("#begintime").datetimepicker({
	    		language: "zh-CN",		
	    		format: "yyyy-mm-dd",	//日期格式
	         	todayBtn:  "linked",	//初始固定当天日期
	    		todayHighlight: "true",		//当天日期高亮
	    		autoclose: "false",   //选中即关闭
	    		minView: "month",	//最小显示到“月”
	        });
	    	
	    	var enddate = new Date(begindate.getTime() + 1*24*60*60*1000);
	    	$("#endtime").val(enddate.getFullYear()+"-"+(enddate.getMonth()+1)+"-"+enddate.getDate());
	    	$("#endtime").datetimepicker({
	    		language: "zh-CN",		
	    		format: "yyyy-mm-dd",	//日期格式
	         	todayBtn:  "linked",	//初始固定当天日期
	    		todayHighlight: "true",		//当天日期高亮
	    		autoclose: "false",   //选中即关闭
	    		minView: "month",	//最小显示到“月”
	        });
	    	
	    	findDeviceError();
	    	
	    	device_log(1);
	    	device_effectAll(1);
	    })
	
	    function findDeviceError() {
	    	var begintime = $("#begintime").val();
	    	var endtime = $("#endtime").val();
	    	
	    	$.ajax({
	    		type: 'post',
	    		url: '${pageContext.request.contextPath }/log/getDeviceError.action',
	    		data: {
	    			begintime: begintime,
	    			endtime: endtime
	    		},
	    		success: function(data) {
	    			
	    			deviceNum = data.deviceNum;
	    			loseHour = data.loseHour;
	    			showHighcharts(deviceNum, loseHour);
	    		}
	    	});
	    }
	    function showHighcharts(deviceNum, loseHour) {
	    	
	    	var chart = new Highcharts.Chart({
	    		chart: {
	    			type: 'column',
	    			renderTo: 'charts',
	    		},
	    		title: {
	    			text: '设备效率损失时间'
	    		},
	    		credits: {		//版权信息
	    			enabled: false
	    		},
	    		xAxis: {
	    			categories: deviceNum,
	    			crosshairs: true
	    		},
	    		yAxis: {
	    			min: 0,
	    			title: {
	    				text: '小时(h)',
	    			}
	    		},
	    		series: [{		//数据列
	    			name: '设备编号',
	    			data: loseHour
	    		}],
	    		toolkip: {		//数据提示框
	    			headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
	    		    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
	    		         '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
	    		    footerFormat: '</table>',
	    		    shared: true,
	    		    useHTML: true
	    		}	
	    	
	    	}); 
	    }
	
	    function device_log(currPage) {
	    	
	    	$.ajax({
	    		type: 'post',
	    		url: '${pageContext.request.contextPath }/log/getDeviceLogError.action',
	    		data: {
	    			currPage: currPage
	    		},
	    		dataType: 'html',
	    		success: function(data) {
	    			$("#devicelog").html(data);
	    		}
	    	});
	    }
	
	    function device_effectAll(currPage){
	    	
	    	$.ajax({
	    		type: 'post',
	    		url: '${pageContext.request.contextPath }/log/getDeviceEffect.action',
	    		data: {
	    			currPage: currPage
	    		},
	    		dataType: 'html',
	    		success: function(data) {
	    			$("#device_effect").html(data);
	    		}
	    	});
	    }
    </script>
</head>
<body>  
	
    <div style="zoom: 90%;">
    <!-- 设备效率损失时间 -->
	<div style="width:600px; height:560px; margin:50px auto auto 50px; display: inline-block; float: left;">
		<div style="width:400px; margin: 0px auto;">
	    	<div style="display: inline-block; width: 120px;">
	    		<input class="form-control" id="begintime" type="text" readonly>
	    	</div>
	    	<span style="display: inline-block; width: 40px; text-align: center; font-size: 16px; font-weight: bold;">至</span>
	    	<div style="display: inline-block; width:120px;">
	    		<input class="form-control" id="endtime" type="text" readonly>
	    	</div>
	    	<div style="display: inline-block; width:100px; text-align: center; ">
	    		<button class="btn" onclick="findDeviceError()">查询</button>
	    	</div>
    	</div>
    	<div id="charts" style="width: 600px; height: 400px; margin: 10px auto; "></div>
 	</div>
 	<!-- 设备故障日志 -->
 	<div id="devicelog" style="width: 400px; height: 560px; margin-top: 20px; margin-right: 50px; display: inline-block; float: right;"></div>
 	
 	<div id="device_effect" style="clear: both; width:800px; margin:0px auto;"></div>
 	</div>
 	 
</body>
</html>